<!-- <template>
    <div class="div1">
        <el-form :inline="true" :model="tabledata" class="demo-form-inline">
          <div style="text-align: center; margin: 20px 0;">
            <h1>企业档案管理</h1>
          </div>
  <el-form-item label="公司名称">
    <el-input  v-model="company.name" placeholder="公司全称"></el-input>
  </el-form-item>
  <el-form-item label="公司类型">
    <el-select  v-model="company.type" placeholder="公司类型">
      <el-option label="企业旗舰店" value="1"></el-option>
      <el-option label="个人专营店" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
  <el-form-item>
    <el-button @click="resetinputs">重置</el-button>
  </el-form-item>
  <el-form-item>
    <el-row>
  
    <el-button type="primary" round @click="dialogFormVisible = true">新增公司</el-button>
  </el-row>
<el-dialog title="新增公司信息" :visible.sync="dialogFormVisible">

<el-form :label-position="labelPosition" label-width="120px" :model="company">
  <el-form-item label="公司id" required>
    <el-input v-model="company.id"></el-input>
  </el-form-item>
  <el-form-item label="公司名称" required>
    <el-input v-model="company.name"></el-input>
  </el-form-item>
  <el-form-item label="公司地址" required>
    <el-input v-model="company.address"></el-input>
  </el-form-item>
  <el-form-item label="公司类型" required>
    <el-select v-model="company.type" placeholder="请选择公司类型">
        <el-option label="企业旗舰店" value="1"></el-option>
        <el-option label="个人专营店" value="2"></el-option>
      </el-select>
  </el-form-item>
  <el-form-item label="公司法人" required>
    <el-input v-model="company.legalperson"></el-input>
  </el-form-item>
  <el-form-item label="注册资本" required>
    <el-input v-model="company.registermoney"></el-input>
  </el-form-item>
  <el-form-item label="成立时间" required>
    <el-input v-model="company.finishtime"></el-input>
  </el-form-item>
</el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog> -->

  <!-- 合同状态对话框 - 移到最外层 -->
  <!-- <el-dialog title="合同状态" :visible.sync="contractVisible" width="30%">
      <span>合同内容详情</span>
      <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 10}"
  placeholder="合同内容"
  v-model="tabledata[indexmemory].contractcontent">
</el-input>

<el-button type="success" v-show="tabledata[indexmemory].contractpass==true">合同已审批</el-button>
<el-button type="danger" v-show="tabledata[indexmemory].contractpass==false">合同未审批</el-button>

      <div slot="footer" class="dialog-footer">
        <el-button @click="contractVisible = false">关闭</el-button>
      </div>
    </el-dialog> -->

    <!-- 租赁空间对话框 -->
    <!-- <el-dialog title="租赁空间信息" :visible.sync="rentmessagevisible" width="30%">
      <span>租赁空间详情</span>
      <br>
      <el-form :label-position="labelPosition" label-width="80px" :model="tabledata[indexmemory]">
  <el-form-item label="租赁面积">
    <el-link type="info">{{ tabledata[indexmemory].rentarea }}</el-link>
  </el-form-item>
  <el-form-item label="租期">
    <el-link type="info">{{ tabledata[indexmemory].renttime }}</el-link>
  </el-form-item>
  <el-form-item label="租金">
    <el-link type="info">{{ tabledata[indexmemory].rentmoney }}</el-link>
  </el-form-item>
</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rentmessagevisible = false">关闭</el-button>
      </div>
    </el-dialog>
   
  </el-form-item> -->


<!-- </el-form>
<el-table
    :data="tabledata"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="公司ID"
      width="120">
    </el-table-column>
    <el-table-column
      fixed
      prop="name"
      label="公司名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type"
      label="公司类型"
      width="120" >
      <template slot-scope="scope">
           <span v-show="scope.row.type=='1' ">企业旗舰店</span>
           <span v-show="scope.row.type=='2' ">个人专营店</span>
      </template>
      企业旗舰店
      个人专营店
    </el-table-column>
    <el-table-column
      prop="legalperson"
      label="法定代表人"
      width="120">
    </el-table-column>
    <el-table-column
      prop="registermoney"
      label="注册资本"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="公司地址"
      width="140">
    </el-table-column>
    <el-table-column
      prop="finishtime"
      label="成立时间"
      width="140">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="190"> -->
      
<!-- 一定要记住表格里一定要用插槽，不然记录不到信息 -->
      <!-- <template slot-scope="scope"> 
        <el-button @click="contractVisible=true ;showindex(scope.$index)" type="text" size="small">合同状态</el-button>
        <el-button @click="rentmessagevisible=true ;showindex(scope.$index)"   type="text" size="small">租赁空间&nbsp;&nbsp;</el-button>
        <template>
  <el-button type="text" @click="open">
     <i class="el-icon-delete"></i>
  </el-button>
</template>
   </template>
</el-table-column> -->
<!-- </el-table>
<el-pagination
background
layout="prev, pager, next"
:total="1000" class="div2">
</el-pagination>


</div>
</template> -->
  
<!-- <style>
.div1{
  background-color: white;
  width:auto;
  padding:30px;

}
.div2{
  padding:20px;
} -->
<!-- 
</style> -->
<!-- <script>
export default {
    data()
    {return {
      dialogFormVisible:false,
      contractVisible:false,
      rentmessagevisible:false,
      labelPosition:'left',
      indexmemory:0,//记录公司索引值
      company:{
        id:"",
        name:"",
        type:"",
        legalperson:"",
        registermoney:"",
        address:"",
        finishtime:"",
        contractcontent:"",
        contractpass:false,
        rentarea:"",
        renttime:"",
        rentmoney:1,
        
      },
      tabledata:[ 
        { id:"1",
          name: "百度",
          type: "1",
          legalperson: "张三",
          registermoney: "100万",
          address: "北京市海淀区",
          finishtime: "2020-01-01",
          contractcontent:"",
        contractpass:false,
        rentarea:"20000平方米",
        renttime:"2年",
        rentmoney:10000,
        },
        { id:"2",
          name: "美团",
          type: "1",
          legalperson: "王五",
          registermoney: "400万",
          address: "广东省惠州市",
          finishtime: "2024-01-01",
          contractcontent:"",
        contractpass:false,
        rentarea:"15000平方米",
        renttime:"5年",
        rentmoney:5000,
        },
        { id:"3",
          name: "字节跳动",
          type: "2",
          legalperson: "赵老三",
          registermoney: "250万",
          address: "广东省广州市",
          finishtime: "2023-01-01",
          contractcontent:"",
        contractpass:true,
        rentarea:"3000平方米",
        renttime:"7年",
        rentmoney:4000,
        },
        { id:"4",
          name: "饿了么",
          type: "2",
          legalperson: "王二",
          registermoney: "700万",
          address: "广东省深圳市",
          finishtime: "2019-01-01",
          contractcontent:"",
        contractpass:false,
        rentarea:"7000平方米",
        renttime:"3年",
        rentmoney:4500,
        },
        { id:"5",
          name: "阿里巴巴",
          type: "2",
          legalperson: "马云",
          registermoney: "750万",
          address: "广东省深圳市",
          finishtime: "2019-01-19",
          contractcontent:"",
        contractpass:true,
        rentarea:"9000平方米",
        renttime:"2年半",
        rentmoney:9000,
        },
        { id:"6",
          name: "大疆",
          type: "1",
          legalperson: "六子",
          registermoney: "1000万",
          address: "广东省深圳市",
          finishtime: "2019-07-01",
          contractcontent:"",
        contractpass:false,
        rentarea:"100000平方米",
        renttime:"3年半",
        rentmoney:9500,
        }
      ]
    }
      
    },
    methods:{
      onSubmit()
      {
        alert("查询功能还在开发中");
      },
      resetinputs()
      {
       this.company.name='';
       this.company.type='';
      },
      handleClick(){
        alert("查看功能还在开发中")
      },
      open() {
        this.$confirm('确认删除该公司信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      showindex(index){
        this.indexmemory=index;
      }
   
    
    }
}
</script> -->
<template>
  <div class="company-archive-container">
    <el-form :inline="true" :model="filterForm" class="filter-form">
      <div class="page-title">
        <h1>企业档案管理</h1>
      </div>
      
      <el-form-item label="公司名称">
        <el-input v-model="filterForm.name" placeholder="公司全称"></el-input>
      </el-form-item>
      
      <el-form-item label="公司类型">
        <el-select v-model="filterForm.type" placeholder="公司类型">
          <el-option label="企业旗舰店" value="1"></el-option>
          <el-option label="个人专营店" value="2"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" round @click="showAddDialog">新增公司</el-button>
      </el-form-item>
    </el-form>

    <!-- 新增公司对话框 -->
    <el-dialog title="新增公司信息" v-model="addDialogVisible">
      <el-form :label-position="labelPosition" label-width="120px" :model="newCompany">
        <el-form-item label="公司id" required>
          <el-input v-model="newCompany.id"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" required>
          <el-input v-model="newCompany.name"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" required>
          <el-input v-model="newCompany.address"></el-input>
        </el-form-item>
        <el-form-item label="公司类型" required>
          <el-select v-model="newCompany.type" placeholder="请选择公司类型">
            <el-option label="企业旗舰店" value="1"></el-option>
            <el-option label="个人专营店" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司法人" required>
          <el-input v-model="newCompany.legalperson"></el-input>
        </el-form-item>
        <el-form-item label="注册资本" required>
          <el-input v-model="newCompany.registermoney"></el-input>
        </el-form-item>
        <el-form-item label="成立时间" required>
          <el-input v-model="newCompany.finishtime"></el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddCompany">确 定</el-button>
      </template>
    </el-dialog>

    <!-- 合同状态对话框 -->
    <el-dialog title="合同状态" v-model="contractDialogVisible" width="30%">
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 10}"
        placeholder="合同内容"
        v-model="currentCompany.contractcontent">
      </el-input>

      <el-button type="success" v-show="currentCompany.contractpass">合同已审批</el-button>
      <el-button type="danger" v-show="!currentCompany.contractpass">合同未审批</el-button>

      <template #footer>
        <el-button @click="contractDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 租赁空间对话框 -->
    <el-dialog title="租赁空间信息" v-model="rentDialogVisible" width="30%">
      <el-form :label-position="labelPosition" label-width="80px" :model="currentCompany">
        <el-form-item label="租赁面积">
          <el-link type="info">{{ currentCompany.rentarea }}</el-link>
        </el-form-item>
        <el-form-item label="租期">
          <el-link type="info">{{ currentCompany.renttime }}</el-link>
        </el-form-item>
        <el-form-item label="租金">
          <el-link type="info">{{ currentCompany.rentmoney }}</el-link>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="rentDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 公司列表表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="公司ID" width="120" fixed />
      <el-table-column prop="name" label="公司名称" width="120" fixed />
      <el-table-column prop="type" label="公司类型" width="120">
        <template #default="scope">
          <span v-if="scope.row.type === '1'">企业旗舰店</span>
          <span v-else-if="scope.row.type === '2'">个人专营店</span>
        </template>
      </el-table-column>
      <el-table-column prop="legalperson" label="法定代表人" width="120" />
      <el-table-column prop="registermoney" label="注册资本" width="120" />
      <el-table-column prop="address" label="公司地址" width="140" />
      <el-table-column prop="finishtime" label="成立时间" width="140" />
      
      <el-table-column label="操作" width="190" fixed="right">
        <template #default="scope">
          <el-button @click="showContractDialog(scope.row, scope.$index)" type="text" size="small">合同状态</el-button>
          <el-button @click="showRentDialog(scope.row, scope.$index)" type="text" size="small">租赁空间</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      class="pagination-container">
    </el-pagination>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'

// 对话框状态
const addDialogVisible = ref(false)
const contractDialogVisible = ref(false)
const rentDialogVisible = ref(false)
const labelPosition = ref('left')

// 当前操作的公司
const currentCompany = reactive({
  index: 0,
  id: "",
  name: "",
  type: "",
  legalperson: "",
  registermoney: "",
  address: "",
  finishtime: "",
  contractcontent: "",
  contractpass: false,
  rentarea: "",
  renttime: "",
  rentmoney: 1
})

// 筛选表单
const filterForm = reactive({
  name: "",
  type: ""
})

// 新增公司表单
const newCompany = reactive({
  id: "",
  name: "",
  type: "",
  legalperson: "",
  registermoney: "",
  address: "",
  finishtime: "",
  contractcontent: "",
  contractpass: false,
  rentarea: "",
  renttime: "",
  rentmoney: 1
})

// 表格数据
const tableData = ref([
  {
    id: "1",
    name: "百度",
    type: "1",
    legalperson: "张三",
    registermoney: "100万",
    address: "北京市海淀区",
    finishtime: "2020-01-01",
    contractcontent: "",
    contractpass: false,
    rentarea: "20000平方米",
    renttime: "2年",
    rentmoney: 10000,
  },
  {
    id: "2",
    name: "美团",
    type: "1",
    legalperson: "王五",
    registermoney: "400万",
    address: "广东省惠州市",
    finishtime: "2024-01-01",
    contractcontent: "",
    contractpass: false,
    rentarea: "15000平方米",
    renttime: "5年",
    rentmoney: 5000,
  },
  {
    id: "3",
    name: "字节跳动",
    type: "2",
    legalperson: "赵老三",
    registermoney: "250万",
    address: "广东省广州市",
    finishtime: "2023-01-01",
    contractcontent: "",
    contractpass: true,
    rentarea: "3000平方米",
    renttime: "7年",
    rentmoney: 4000,
  },
  {
    id: "4",
    name: "饿了么",
    type: "2",
    legalperson: "王二",
    registermoney: "700万",
    address: "广东省深圳市",
    finishtime: "2019-01-01",
    contractcontent: "",
    contractpass: false,
    rentarea: "7000平方米",
    renttime: "3年",
    rentmoney: 4500,
  },
  {
    id: "5",
    name: "阿里巴巴",
    type: "2",
    legalperson: "马云",
    registermoney: "750万",
    address: "广东省深圳市",
    finishtime: "2019-01-19",
    contractcontent: "",
    contractpass: true,
    rentarea: "9000平方米",
    renttime: "2年半",
    rentmoney: 9000,
  },
  {
    id: "6",
    name: "大疆",
    type: "1",
    legalperson: "六子",
    registermoney: "1000万",
    address: "广东省深圳市",
    finishtime: "2019-07-01",
    contractcontent: "",
    contractpass: false,
    rentarea: "100000平方米",
    renttime: "3年半",
    rentmoney: 9500,
  }
])

// 查询
const handleQuery = () => {
  ElMessage.warning("查询功能还在开发中")
}

// 重置查询条件
const handleReset = () => {
  filterForm.name = ''
  filterForm.type = ''
}

// 显示新增对话框
const showAddDialog = () => {
  addDialogVisible.value = true
}

// 确认新增公司
const confirmAddCompany = () => {
  // 这里应该添加表单验证逻辑
  tableData.value.push({...newCompany})
  addDialogVisible.value = false
  ElMessage.success("新增公司成功")
  // 重置表单
  Object.assign(newCompany, {
    id: "",
    name: "",
    type: "",
    legalperson: "",
    registermoney: "",
    address: "",
    finishtime: "",
    contractcontent: "",
    contractpass: false,
    rentarea: "",
    renttime: "",
    rentmoney: 1
  })
}

// 显示合同对话框
const showContractDialog = (row, index) => {
  Object.assign(currentCompany, row)
  currentCompany.index = index
  contractDialogVisible.value = true
}

// 显示租赁对话框
const showRentDialog = (row, index) => {
  Object.assign(currentCompany, row)
  currentCompany.index = index
  rentDialogVisible.value = true
}

// 删除公司
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该公司信息, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功!')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
</script>

<style scoped>
.company-archive-container {
  background-color: white;
  width: auto;
  padding: 30px;
}

.page-title {
  text-align: center;
  margin: 20px 0;
}

.filter-form {
  margin-bottom: 20px;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>